<template>
	<view>
		<u-sticky>
			<view class="searchLan">
				<u-search ref="search" :showAction="false" :clearabled="true" style="width: 90%; margin: auto"
					:actionStyle="actionStyle" @search="search()" @custom="custom()" v-model="searchText"></u-search>
				<view class="screen" @click="custom()">
					<image class="img" src="../../../static/screen.png" mode=""></image>
					<view class="text"> 筛选 </view>
				</view>
			</view>
		</u-sticky>

		<view class="item" v-for="(item, index) in listData" :key="item.id" @click="goDetails(item)">
			<view class="item_container">
				<view class="item_container_title">{{ item.title }}</view>
				<view class="item_container_time">
					<view class="item_container_time_text">发行时间:</view>
					<view class="item_container_time_data">{{ item.pubdate }}</view>
				</view>
				<view class="item_container_time" style="margin-top: 0.8rem">
					<view class="item_container_time_text">实施时间:</view>
					<view class="item_container_time_data">{{ item.execdate }}</view>
				</view>
				<view class="item_container_tags">
					<u-tag :text="swapvalid(item.status)" plain size="mini" type="success"
						class="item_container_tags_tag"></u-tag>
					<u-tag :text="lawTypeswap(item.type)" plain size="mini" type="error"
						style="text-align: center;margin-left: 5%;" class="item_container_tags_tag"></u-tag>
					<u-tag :text="item.pubunitname" plain size="mini" type="primary" class="item_container_tags_tag"
						style="text-align: center;margin-left: 5%;"></u-tag>
				</view>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<view>
			<u-popup :show="showpopup" @close="close" @open="open" :closeable="true" round="20pt">
				<view class="popup">
					<view class="popup_containter">
						<view class="popup_containter_title">筛选</view>
						<view>
							<view class="fontstyle">法律性质</view>
							<view @click="showactions1 = true">
								<u--input placeholder="请选择" :disabled="true" border="surround" v-model="typevalue"
									suffixIcon="arrow-right" style="border-radius: 50rpx"></u--input>
							</view>
						</view>
						<view>
							<view class="fontstyle">发布机关</view>
							<view @click="showactions2 = true">
								<u--input placeholder="请选择" :disabled="true" border="surround" v-model="unitvalue"
									suffixIcon="arrow-right" style="border-radius: 50rpx"></u--input>
							</view>
						</view>
						<view>
							<view class="fontstyle">有效性</view>
							<view @click="showactions3 = true">
								<u--input placeholder="请选择" :disabled="true" border="surround" v-model="validvalue"
									suffixIcon="arrow-right" style="border-radius: 50rpx"></u--input>
							</view>
						</view>
					</view>
					<view class="popup_buttons">
						<u-button text="重置" class="popup_buttons_button" @click="clear"></u-button>
						<u-button text="查询" class="popup_buttons_button1" @click="select"></u-button>
					</view>
				</view>
			</u-popup>
			<view>
				<u-action-sheet :actions="lawTypeList" :title="title1" :show="showactions1" @select="lawTypeListselect"
					@close="lawTypeListclose"></u-action-sheet>
			</view>
			<view>
				<u-action-sheet :actions="unitList" :title="title2" :show="showactions2" @select="unitListselect"
					@close="unitListclose"></u-action-sheet>
			</view>
			<view>
				<u-action-sheet :actions="St_lawList" :title="title3" :show="showactions3" @select="lawListselect"
					@close="lawListclose"></u-action-sheet>
			</view>
		</view>

		<!-- 下拉显示控件 -->
		<view v-if="listData.length != 0">
			<u-loadmore :status="status" :load-text="loadText" />
		</view>
		<!-- 空状态 -->
		<u-empty v-if="listDataEmpty" text="暂无条文记录" mode="data" style="margin-top: 10rem">
		</u-empty>
		<!-- toast提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		St_lawList
	} from '@/common/enumeration/St_law.js'
	import {
		Tp_lawList
	} from '@/common/enumeration/Tp_law.js'
	import {
		Tp_lawsrcList
	} from '@/common/enumeration/Tp_lawsrc.js'
	import {
		getAllPubunitList
	} from '@/common/api/approve/home/law_pubunit.js'
	import {
		getLawDocPage
	} from '@/common/api/approve/home/law_doc.js'

	export default {
		data() {
			return {
				flag: false,
				listDataEmpty: false, //列表数据是否为空
				status: 'loadmore', //加载的状态
				loadText: {
					// 下拉文字
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				listData: [], //法律条文数据
				typevalue: '',
				validvalue: '',
				unitvalue: '',
				actionStyle: {
					color: '#3296FA'
				},
				searchText: '',
				showpopup: false,
				lawname: '',
				lawTypeList: [{
						name: '法律',
						value: '6300100'
					},
					{
						name: '行政法规',
						value: '6300101'
					},
					{
						name: '地方法规',
						value: '6300102'
					},
					{
						name: '部门规章',
						value: '6300103'
					},
					{
						name: '地方规章',
						value: '6300104'
					},
					{
						name: '规范性文件',
						value: '6300105'
					},
					{
						name: '司法解释',
						value: '6300106'
					}
				], // 法律性质下拉框数据
				unitList: [], // 发布机关查询数据
				St_lawList: [{
						name: '有效',
						key: 'Yes',
						value: '6300200'
					},
					{
						name: '失效',
						key: 'NO',
						value: '6300201'
					},
					{
						name: '已修订',
						key: 'CHANGE',
						value: '6300202'
					},
					{
						name: '尚未实施',
						key: 'UNDO',
						value: '6300203'
					}
				], // 法律有效性
				title1: '法律性质',
				showactions1: false,
				title2: '发布机关',
				showactions2: false,
				title3: '有效性',
				showactions3: false,
				queryParam: {
					f_title: '', //法律名称
					f_type: undefined, // 法律性质
					f_pubunitid: undefined, // 法律发布机关
					f_source: undefined, //来源途径
					f_pubcode: '', //发布文号
					f_status: undefined, //有效性
					f_pubStartDate: null, // 发布开始日期
					f_pubEndDate: null, //
					f_execStartDate: null, // 施行开始日期
					f_execEndDate: null, //
					f_loseStartDate: null, // 失效开始日期
					f_loseEndDate: null,
					f_recordStartDate: null, // 收录开始日期
					f_recordEndDate: null,
					pageNumber: 1,
					pageSize: 20,
					sort: 'pubdate',
					order: 'desc'
				},
				upagination: {
					// 表格分页参数
					defaultPageSize: 20,
					total: 0,
					current: 1,
					pageSize: 20,
					showTotal: total => `共${total}条数据`,
					showSizeChanger: true,
					pageSizeOptions: ['10', '20', '50', '100']
				},
				loading: false
			}
		},
		onLoad() {
			console.log(this.$refs)
			this.queryUnitList() //查询发布机关数据

			this.queryList()
		},
		methods: {
			//重置按钮
			clear() {
				this.reQuery()
				this.typevalue = ''
				this.validvalue = ''
				this.unitvalue = ''
			},
			//查询按钮
			select() {
				this.queryParam.pageNumber = 1
				this.queryList(this.queryParam)
				this.close()
			},
			/**
			 * 重置查询条件并查询数据
			 */
			reQuery() {
				this.queryParam = {
					f_title: '', //法律名称
					f_type: undefined, // 法律性质
					f_pubunitid: undefined, // 法律发布机关
					f_source: undefined, //来源途径
					f_pubcode: '', //发布文号
					f_status: undefined, //有效性
					f_pubStartDate: null, // 发布开始日期
					f_pubEndDate: null, //
					f_execStartDate: null, // 施行开始日期
					f_execEndDate: null, //
					f_loseStartDate: null, // 失效开始日期
					f_loseEndDate: null,
					f_recordStartDate: null, // 收录开始日期
					f_recordEndDate: null,
					pageNumber: 1,
					pageSize: 20,
					sort: 'pubdate',
					order: 'desc'
				}
				this.queryList()
			},
			onPullDownRefresh() {
				uni.showLoading({
					title: '加载中'
				})
				this.queryParam.pageNumber = 1
				this.listData = []
				this.queryList()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			},
			//上拉加载更多数据
			onReachBottom() {
				if (this.status == 'nomore') {
					return
				}
				this.status = 'loading'
				this.queryParam.pageNumber++
				this.flag = true //用于控制查询数据时是在数值后面拼接数据还是重新赋值
				this.queryList()
			},
			//跳转到法律明细
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/approve/home/lawDetails?item=' + JSON.stringify(item)
				})
			},
			//法律类型转换
			lawTypeswap(number) {
				for (let index in this.lawTypeList) {
					if (number == this.lawTypeList[index].value)
						return this.lawTypeList[index].name
					else continue
				}
			},
			//有效性转换
			swapvalid(number) {
				if (number == '6300200') return '有效'
				else if (number == '6300201') return '失效'
				else if (number == '6300202') return '已修订'
				else if (number == '6300203') return '尚未实施'
			},
			//发布机关选择关闭
			unitListclose() {
				this.showactions2 = false
			},
			//发布机关选择
			unitListselect(item) {
				this.unitvalue = item.name
				this.queryParam.f_pubunitid = item.primaryKey
				this.showactions2 = false
			},
			//法律性质选择器关闭
			lawTypeListclose() {
				this.showactions1 = false
			},
			//法律性质选择
			lawTypeListselect(item) {
				this.typevalue = item.name
				this.queryParam.f_type = item.value
				this.showactions1 = false
			},
			//有效性选择器关闭
			lawListclose() {
				this.showactions3 = false
			},
			//有效性选择
			lawListselect(item) {
				this.queryParam.f_status = item.value
				this.validvalue = item.name
				this.showactions3 = false
			},
			change() {},
			//关闭筛选弹窗
			close() {
				this.showpopup = false
			},
			//打开筛选弹窗
			open() {
				this.showpopup = true
			},
			//搜索
			search() {
				if (this.searchText == '') {
					this.queryParam.f_title = undefined
				} else {
					this.queryParam.f_title = this.searchText
				}
				this.queryList()
			},
			//筛选
			custom() {
				this.open()
			},
			//查询发布机关数据
			async queryUnitList() {
				await getAllPubunitList().then(res => {
					if (res.code == 0 && res.data) {
						this.unitList = res.data
					} else {
						this.unitList = []
					}
				})
			},
			//法律条文分页数据的查询
			queryList() {
				// 时间转换
				let cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
				if (this.queryParam.pubStartDate?.format) {
					cpQueryParam.pubStartDate =
						this.queryParam.pubStartDate.format('YYYY-MM-DD') + ' 00:00:00'
				}
				if (this.queryParam.pubEndDate?.format) {
					cpQueryParam.pubEndDate =
						this.queryParam.pubEndDate.format('YYYY-MM-DD') + ' 23:59:59'
				}
				if (this.queryParam.execStartDate?.format) {
					cpQueryParam.execStartDate =
						this.queryParam.execStartDate.format('YYYY-MM-DD') + ' 00:00:00'
				}
				if (this.queryParam.execEndDate?.format) {
					cpQueryParam.execEndDate =
						this.queryParam.execEndDate.format('YYYY-MM-DD') + ' 23:59:59'
				}
				if (this.queryParam.loseStartDate?.format) {
					cpQueryParam.loseStartDate =
						this.queryParam.loseStartDate.format('YYYY-MM-DD') + ' 00:00:00'
				}
				if (this.queryParam.loseEndDate?.format) {
					cpQueryParam.loseEndDate =
						this.queryParam.loseEndDate.format('YYYY-MM-DD') + ' 23:59:59'
				}
				if (this.queryParam.recordStartDate?.format) {
					cpQueryParam.recordStartDate =
						this.queryParam.recordStartDate.format('YYYY-MM-DD') + ' 00:00:00'
				}
				if (this.queryParam.recordEndDate?.format) {
					cpQueryParam.recordEndDate =
						this.queryParam.recordEndDate.format('YYYY-MM-DD') + ' 23:59:59'
				}
				if (this.queryParam.f_title) {
					cpQueryParam.f_title = this.queryParam.f_title.toString().trim()
				}
				if (this.queryParam.f_pubcode) {
					cpQueryParam.f_pubcode = this.queryParam.f_pubcode.toString().trim()
				}
				if (this.queryParam.f_type) {
					cpQueryParam.f_type = this.queryParam.f_type.toString().trim()
				}
				if (this.queryParam.f_pubunitid) {
					cpQueryParam.f_pubunitid = this.queryParam.f_pubunitid.toString().trim()
				}
				if (this.queryParam.f_status) {
					cpQueryParam.f_status = this.queryParam.f_status.toString().trim()
				}
				this.loading = true
				uni.showLoading({
					title: '加载中'
				})
				getLawDocPage(cpQueryParam)
					.then(res => {
						if (res.code !== 0) {
							this.listDataEmpty = true
							this.$refs.uToast.show({
								position: 'center',
								message: '获取数据失败',
								type: 'error'
							})
						} else {
							uni.hideLoading()
							console.log(this.flag)
							if (this.flag) {
								this.listData = this.listData.concat(res.data.records)
								this.flag = false //改回默认值
							} else {
								this.listData = res.data.records
							}
							if (this.listData.length == 0) {
								this.listDataEmpty = true
							} else {
								this.listDataEmpty = false
							}
							if (this.listData.length == res.data.total) {
								this.status = 'nomore'
							} else {
								this.status = 'loadmore'
							}
							this.upagination.total = res.data.total
							this.upagination.current = res.data.current
							this.upagination.pageSize = res.data.size
						}
						uni.hideLoading()
					})
					.catch(err => {
						this.listData = []
						this.$refs.uToast.show({
							position: 'center',
							message: '获取数据失败',
							type: 'error'
						})
					})
					.finally(() => {
						this.loading = false
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-tag--mini {
		height: 16px !important;
	}

	::v-deep .u-search__content {
		height: 70rpx;
	}

	.searchLan {
		background-color: #ffffff;
		height: 100rpx;
		padding-top: 30rpx;
		position: relative;

		&_search {}

		.screen {
			display: flex;
			position: absolute;
			right: 70rpx;
			top: 48rpx;
			// background-color: pink;
			border-left: 1px solid #ccc;

			.img {
				width: 40rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}

			.text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #3296fa;
				margin-left: 10rpx;
			}
		}
	}

	.item {
		width: 90%;
		background-color: #ffffff;
		margin-left: 5%;
		height: 10rem;
		border-radius: 20rpx;
		margin-top: 30rpx;

		&_container {
			padding: 30rpx;

			&_title {
				font-weight: 800;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 20rem;
				overflow: hidden;
			}

			&_time {
				margin-top: 0.8rem;
				display: flex;
				flex-direction: row;

				&_text {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1f1f1f;
					opacity: 0.65;
				}

				&_data {
					margin-left: 20rpx;
					font-size: 30rpx;
				}
			}

			&_tags {
				display: flex;
				flex-direction: row;
				margin-top: 0.8rem;

				&_tag {
					// margin-left: 30rpx;
				}
			}
		}
	}

	.popup {
		width: 100%;
		height: 24rem;
		display: flex;
		flex-direction: column;

		&_containter {
			display: flex;
			flex-direction: column;
			width: 80%;
			margin-left: 10%;

			&_title {
				width: 100%;
				text-align: center;
				margin-top: 30rpx;
			}
		}

		&_buttons {
			display: flex;
			flex-direction: row;
			margin-top: 30rpx;

			&_button {
				background-color: #b2b2b2;
				border-radius: 20rpx;
				width: 40%;
				color: #ffffff;
			}

			&_button1 {
				background-color: #264aa2;
				border-radius: 20rpx;
				width: 40%;
				color: #ffffff;
			}
		}
	}

	.fontstyle {
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	::v-deep .u-action-sheet__item-wrap {
		min-height: 100rpx;
		max-height: 700rpx;
		overflow-y: scroll;
	}
</style>